@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-switch
  display inline-block
  width 48px
  height 24px
  line-height 22px
  border-radius 24px
  vertical-align middle
  border 1px solid #ccc
  background-color #ccc
  position relative
  cursor pointer
  user-select none
  transition all $time-df-transition ease-in-out
  margin-top 4px
  padding 0
  outline none
  &:focus:not(.va-df-switch-disabled)
    border-color $color-df-input-border-focus
    box-shadow inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red($color-df-input-border-focus), green($color-df-input-border-focus), blue($color-df-input-border-focus), .6)

  &-inner
    color #fff
    font-size 12px
    position absolute
    left 25px

    i
      width 12px
      height 12px
      text-align center



  &:after
    content ''
    width 20px
    height 20px
    border-radius 20px
    background-color #fff
    position absolute
    left 1px
    top 1px
    cursor pointer
    transition left $time-df-transition ease-in-out,width $time-df-transition ease-in-out


  &:activeafter
    width 26px


  &:focus
    box-shadow 0 0 0 2px fade($color-primary, 20%)
    outline 0


  &:focushover
    box-shadow none


  &-small
    width 24px
    height 12px
    line-height 10px
    margin-top 10px
    &:after
      width 10px
      height 10px
      top 0
      left 0

    &:activeafter
      width 14px



  &-small&-checkedafter
    left 12px


  &-smallactive&-checkedafter
    left 8px


  &-large
    width 60px
    &:activeafter
      width 26px



  &-largeactiveafter
    width 32px


  &-large&-checkedafter
    left 37px


  &-largeactive&-checkedafter
    left 25px


  &-checked
    border-color $color-primary
    background-color $color-primary

    .va-df-switch-inner
      left 8px


    &:after
      left 25px


    &:activeafter
      left 19px



  &-disabled
    cursor not-allowed
    background #f3f3f3
    border-color #f3f3f3

    &:after
      background #ccc
      cursor not-allowed


    .va-df-switch-inner
      color #ccc



